<template>
	<view class="body" :style="{height:screenHeight}">
		<u-toast ref="uToast"></u-toast>
		<view style="height: 40%;">
			<view class="logo">
				<u--image :src="logoSrc" width="120px" height="120px"></u--image>
			</view>
			<view class="title">登录 TC Message</view>
			<u-button text="微信一键登录" type="success" :hairline="false" throttleTime="2000" shape="circle"
				@click="getUserProfile"></u-button>
		</view>
	</view>
</template>

<script>
	import api from '../api.js'
	export default {
		data() {
			return {
				//屏幕高度
				screenHeight: "",
				logoSrc: "/static/logo.png"
			};
		},
		onLoad() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.windowHeight + "px"
				}
			})
		},
		methods: {
			// 登录方法
			async login(code) {
				let that = this
				//调用自己封装的方法
				var res = await api.LoginByWeChat(code)
				//登录成功跳转页面
				if (res.successed) {
					// this.$refs.uToast.show({
					// 	type: 'success',
					// 	message: res.message,
					// 	complete() {
					// 		that.$store.state.token = res.token
					// 		//为了用动画所以用了navigateTo
					// 		uni.switchTab({
					// 			url: '/pages/home/home'
					// 		})
					// 	}
					// })
					that.$store.state.token = res.token
					uni.switchTab({
						url: '/pages/chat/chat'
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: res.message
					})
				}
			},
			getChatCode() {
				//因为作用域先提前赋值
				var that = this
				//使用uni封装的一键登录方法
				uni.login({
					provider: 'weixin',
					success(res) {
						//成功后带着微信登录返回的code去请求我们的后端
						that.login(res.code)
					}
				})
			},
			getUserProfile() {
				var that = this
				uni.getUserProfile({
					desc: "获取你的昵称、头像",
					success(res) {
						if (res.errMsg == "getUserProfile:ok" && res.userInfo != undefined) {
							//我用store来存储一些数据，你可以放到你要放的地方
							that.$store.state.userInfo.nickName = res.userInfo.nickName,
								that.$store.state.userInfo.avatarUrl = res.userInfo.avatarUrl
							that.getChatCode()
						}
					},
					complete(res) {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		// width: 100%;
		// background: linear-gradient(#415169, #1e2d43);
		background: linear-gradient(#ccc, #fff);

		.logo {
			padding-top: 200rpx;
			margin: auto;
			width: 120px;
			height: 120px;
		}

		.title {
			width: 100%;
			margin: 30px 0;
			text-align: center;
			font-size: 18px;
			color: white;
		}

		.u-button {
			width: 60% !important;
		}
	}
</style>
